<template>
	<!-- 发帖 -->
	<view class="contents page" @touchstart="winClick">
		<status-bar title='发布' :goHome='fromShare'></status-bar>
		<view class='tags'>
			<view>发布至：</view>
			<text :style="{'--color': color}" :class='{on:item.classifyid==classifyid,thmeBg:item.classifyid==classifyid,thmeBorder:item.classifyid==classifyid}' v-for='(item,index) in classify' :key='index' @click="check(index,item.classifyid)">{{item.name}}</text>
		</view>
		<view class="">
			<textarea 
				v-model="content" 
				 @focus="winCl = false" 
				placeholder="说点什么吧..." 
				placeholder-style="color:#999;font-size=24upx" 
				focus="true" maxlength="-1" 
				adjust-position="false"
				show-confirm-bar="false"
			/>		
			<view class="imagesList">
				<view v-for="(item,index) in selectImagesItem" :key="index">
					<text class="icon-jianshao iconfont delImg thmeColor" :style="{'--color': color}" @click="del(index)"></text>
					<image class="upImg" :src="item" mode="aspectFill"></image>
				</view>
				<view class="bottomFunction" v-if="imgEn">
					<image :src="staticUrl+'/images/jh_up/addImg.png'" @click="selectImage" mode="aspectFit"></image>
				</view>
			</view>
			<view class="postBtn thmeBg" :style="{'--color': color}" @click="postTie()">发布</view>
		</view>
		<showModel @cancelFunc='showModal = false' v-if='showModal' type='2'></showModel>
	</view>
</template>

<script>
	var that;
	export default{
		data(){
			return {	
				color: getApp().globalData.color,
				year:"",//年
				month:"",//月
				dates:"",//日
				hours:"",//时
				minutes:"",//分
				selectImages:false,
				selectImagesItem:[],
				imgsrc:[],
				classify:[],
				activeId:0,
				classifyid:'', // 选择的分类id
				imgs:[],
				imgEn: true,
				ftvid:'',
				title:'',
				content:'',
				flag:true,
				winCl:true, // 判断是否点击除了input以外的元素
				bid: uni.getStorageSync('bid'),
				loadingNow:false, // 图片正在上传
				staticUrl: this.staticUrl,
				showModal:false,
				fromShare:0, // 是否来自分享 1是 显示返回首页
			}
		},
		onShow() {
			
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid+'&pageType=11',
				imageUrl: shareData.imageUrl
			}
		},
		onLoad(options) {
			that = this
			if (options.fromShare){that.fromShare = options.fromShare}
				
			that.$http.post({
				url: '/SRA_UserApp/classify',
				data: {
					bid: that.bid
				}
			}).then(res => {
				if(res.data){
					that.classify = res.data
					if(!options.clsfid)
						that.classifyid = res.data[0].classifyid;
				}
			})
			if(options.clsfid){
				that.classifyid = options.clsfid
			}
			uni.getStorage({
				key: 'vid',
				success: function(res) {
					if(res.data){
						that.ftvid = res.data;
					}else{
						// #ifdef H5
							uni.navigateTo({
								url:'/userPage/login/binding'
							})
						// #endif
						// #ifndef H5
							that.showModal = true
						// #endif
					}
				},
				fail() {
					// #ifdef H5
						uni.navigateTo({
							url:'/userPage/login/binding'
						})
					// #endif
					// #ifndef H5
						that.showModal = true
					// #endif
				}
			})
			// #ifdef H5
			this.H5Share('pageType=1','')
			// #endif
		},
		onShow() {
			this.dateOnlode()
		},
		methods:{
			postTie(){
				//点击完成按钮
				if(that.flag){
					var imgs = that.imgs.join(",");
					// that.content == '' && 
					if(!imgs || imgs.length < 1){
						uni.showToast({
							icon:'none',
							title:'请上传图片！'
						})
						return
					}
					if(that.loadingNow){
						return
					}
					that.flag = false;
					uni.showLoading({
						title: '上传中'
					});
					that.$http.post({
						url: '/SRA_UserApp/publish',
						data: {
							bid: that.bid,
							ftvid: that.ftvid,
							classifyid: that.classifyid,
							file_title:that.title,
							file_content:that.content,
							file_img: imgs
						}
					}).then(res => {
						if(res.success){
							uni.navigateBack({
								delta:1
							})
							uni.hideLoading();
						}else{
							uni.showToast({
								icon:'none',
								title:res.msg
							})
							that.flag = true;
						}
					})
				}
			},
			winClick(){
				setTimeout(function(){
					if(that.winCl){ // 点击的是屏幕
						uni.hideKeyboard();
					}	
					that.winCl = true
				},200)
			},
			check(index,id){
				that.activeId = index;
				that.classifyid = id;
			},
			//初始化时间日期
			dateOnlode(){
				const date = new Date();
				that.year = date.getFullYear();//年
				that.month = (date.getMonth() + 1) < 10?'0' + (date.getMonth() + 1) : (date.getMonth() + 1);//月
				that.dates = date.getDate() < 10?'0' + date.getDate() : date.getDate();//日
				that.hours = date.getHours() < 10?'0' + date.getHours() : date.getHours();//时
				that.minutes = date.getMinutes() < 10?'0' + date.getMinutes() : date.getMinutes();//分
			},
			del(index){
				// 删除图片
				that.$delete(that.selectImagesItem,index);
				that.$delete(that.imgs,index);
				var len = that.selectImagesItem.length;
				if(len<9){
					that.imgEn = true;
				}
				if(len<1){
					that.selectImages = false;
				}
			},
			//选择图片
			selectImage(){
				uni.chooseImage({
					count: 2,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType:['album','camera'],
					success: (res) => {
						that.selectImages = true;
						uni.showLoading({
							title:'上传中'
						})
						that.loadingNow = true; // 图片正在上传
						for (let i=0;i<res.tempFilePaths.length;i++) {
							that.$common.uploadFile('/zzjApp/uploade?bid='+that.bid,res.tempFilePaths[0]).then(res2=>{
								var data = res2;
								var type = typeof res2; 
								if(type == 'string'){
									data = JSON.parse(data)
								}
								if(data.errcode == 100){
									if (that.selectImagesItem.length < 9 || (9 - that.selectImagesItem.length) > res.tempFilePaths.length) {
										that.selectImagesItem.push(res.tempFilePaths[i]);
										if(that.selectImagesItem.length == 9)
											that.imgEn = false;
									}
									var imgItem;
									imgItem = data.url;
									imgItem = imgItem.substring(22,imgItem.length);
									that.imgs.push(imgItem);
								}else{
									uni.showToast({
										icon:'none',
										title: data.msg+'!',
										duration:2000
									})
								}
								uni.hideLoading();
								that.loadingNow = false;
							})	
						}
					}
				})
			},
			start: function(i) {
				var actionbuttons=[{title:"删除",style:"destructive"}];
				var actionstyle={title:"请选择",cancel:"取消",buttons:actionbuttons};
				plus.nativeUI.actionSheet(actionstyle, function(e){
					that.selectImagesItem.splice(i,1)
				})
			}
		},
		computed:{
			topDates:function () {
				return that.year + "-" + that.month + "-" + that.dates
			},
			topTimes:function(){
				return that.hours + "：" + that.minutes
			}
		}
	}
</script>

<style scoped="">
	page{background: white;}
	.contents{height: calc(100vh - 88upx);overflow-x: hidden;overflow-y: auto;position: relative;min-height: 45vh;background: white;}
	.isLeftDate{line-height: 60upx;border-bottom: 1upx solid #F2F2F2;margin: 0 30upx;color: #333333;font-size: 28upx;padding: 20upx 0;}
	.isLeftDate text{margin: 0 20upx;}
	

	.contents textarea{width: 90%;padding: 0 5%;color: #333;letter-spacing: 1upx;line-height: 50upx;text-align: justify;max-height: 200upx;margin-top: 20upx;font-size: 28upx;}
	/* .bottomFunction{width: 100%;position: relative;bottom: 0;overflow: hidden;text-align: right;padding: 0 40upx;} */
	.bottomFunction image{height: 100%;display: inline-block;width: 100%;}
	/* .bottomFunction image:nth-child(1){width: 44upx;margin-right: 40upx;} */
	/* .bottomFunction image:nth-child(2){width: 20upx;} */
	.imagesItem{width: 100%;padding: 20upx 5%;}
	.imgItemList{width: 210upx;height: 210upx;margin-top: 10upx;display: inline-block;margin-left: 20upx;}
	.imgItemList:nth-child(3n+1){margin-left: 0;}
	
	/** jh **/
	.imagesList{padding: 20upx 0 0 20upx;}
	.imagesList view{
		width: calc(33.33% - 20upx);
		height: calc(33.33vw - 20upx);
		position: relative;
		display: inline-block;
		margin-right: 20upx;
		margin-bottom: 20upx;
		/* float: left; */
	}
	.imagesList .upImg{width: 100%;height: 100%;}
	.imagesList .upImg:last-child{margin-right: 0;}
	.delImg{
		position: absolute;
		z-index: 22;
		width: 20px;
		height: 20px;
		top: -10px;
		right: -10px;
		font-size: 36rpx;
		background-color: #FFFFFF;
		border-radius: 50%;
	}
	.tags{
		padding: 0 30upx;
		
	}
	.tags view{
		color: #333;
		font-size: 32upx;
		line-height: 54upx;
	}
	.tags text{
		display: inline-block;
		padding: 0 20upx;
		line-height: 46upx;
		border: 2upx solid #DDDDDD;
		color: #999;
		border-radius: 26upx;
		font-weight: normal;
		font-size: 28upx;
		margin: 20upx 10upx 0 0;
	}
	.on{
		/* background: #FF8273;
		border: 2upx solid #FF8273!important; */
		color: white!important;
	}
	.postBtn{
		text-align: center;
		color: white;
		line-height: 78upx;
		font-size: 28upx;
		border-radius: 40upx;
		margin: 24upx;
	}
</style>
